<template>
	<Header v-model:menu="menu"/>
	<div class="main">
		<LeftMenu/>
		<div class="router-view">
			<router-view/>
		</div>
	</div>
	<NavigationMenu v-model:menu="menu"/>
	<Dialog v-for="dialog in dialogs" v-bind="dialog"></Dialog>
</template>

<script>
import Header from '@/components/app/Header';

import NavigationMenu from '@/components/app/Menu';

import LeftMenu from '@/components/app/menu/Left' ;

import {
	App
} from 'hb-full-cli' ;

export default App({
	
	components: {
		Header,
		NavigationMenu,
		LeftMenu
	}
});
</script>

<style>
html,
body {
	padding: 0;
	margin: 0;
	height: 100%;
	overflow: hidden;
}

#app {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	background: #f5f5f5;
}
</style>

<style lang="scss" scoped>
.header {
	height: 50px;
	margin-bottom: 10px;
}

.main {
	position: relative;
	flex: 1;
	min-width: 0;
	min-height: 0;
	display: flex;
	flex-direction: row;
	align-items: stretch;

	> .router-view{
		flex:1;
		min-width: 0;
		min-height: 0;
	}
}
.menu {
	position: absolute;
	top: 52px;
	bottom: 0;
	width: 240px;
	z-index: 1000;
}
</style>
